<template>
  <cml-module-item :title="titleText" :titleMore="titleText">
    <a-switch size="small" :checked="isDragOpen" @change="setDragOpt" />
    <template v-slot:detail>
      <drag-opt></drag-opt>
    </template>
  </cml-module-item>
</template>
<script>
import { Switch } from 'ant-design-vue'
import CmlModuleItem from '../cml-module-item'
import DragOpt from './dragOpt'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'customLayout',
  components: {
    ASwitch: Switch,
    CmlModuleItem,
    DragOpt
  },
  model: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState('part', ['isDragOpen']),
    titleText() {
      return this.$t('cmlpanel.customLayout')
    }
  },
  watch: {
    isDragOpen: {
      handler: function (v) {
        if (v === true) {
          app.partServer.addInfo('自定义布局开启')
        } else {
          app.partServer.addInfo('自定义布局关闭')
        }
      },
      immediate: false
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    setDragOpt(val) {
      app.partServer.setDragOpt({ key: 'isDragOpen', val })
    }
  }
}
</script>
<style lang="scss" scoped></style>
